<template>
  <base-text class="w100" content="测试BaseText组件，设置宽度，文字过长超出部分显示...，鼠标悬停显示全部文字"/>
  <base-text class="mgt10" @click="handleClick" content="测试BaseText组件点击事件"/>
  <base-text class="mgt10" @mouseenter="handleMouseenter" content="测试BaseText组件鼠标进入事件"/>
  <base-text class="mgt10" @mouseleave="handleMouseleave" content="测试BaseText组件鼠标移出事件"/>
</template>

<script>
  export default {
    inheritAttrs: false
  }
</script>

<script setup>
  const handleEvent = text => window.alert(text);
  const handleClick = () => handleEvent('click');
  const handleMouseenter = () => handleEvent('mouseenter');
  const handleMouseleave = () => handleEvent('mouseleave');
</script>
